<template>
  <!-- <div class="home">Hello, {{ userInfoStore.name }}</div> -->
  <div class="bj-color">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="12" :md="6" class="col-ys">
        <CommonCard title="今日销售额" value="303,467,99">
          <div class="card-body-tp">
            <span>日同比 -19.16% </span>
            <svg
              t="1664211714727"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4477"
              width="14"
              height="14"
            >
              <path
                d="M573.056 752l308.8-404.608A76.8 76.8 0 0 0 820.736 224H203.232a76.8 76.8 0 0 0-61.056 123.392l308.8 404.608a76.8 76.8 0 0 0 122.08 0z"
                p-id="4478"
                fill="#ff0000"
              ></path>
            </svg>
          </div>
          <div class="card-body-tp">
            <span>日同比 56.67% </span>
            <svg
              t="1664211823894"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5686"
              width="14"
              height="14"
            >
              <path
                d="M573.056 272l308.8 404.608A76.8 76.8 0 0 1 820.736 800H203.232a76.8 76.8 0 0 1-61.056-123.392L450.976 272a76.8 76.8 0 0 1 122.08 0z"
                p-id="5687"
                fill="#008000"
              ></path>
            </svg>
          </div>
          <template #footer>
            <div class="card-footer-jm">昨日销售额¥ 360,000,00</div>
          </template>
        </CommonCard>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <CommonCard title="今日订单" value="182,425">
          <LineChart></LineChart>
          <template #footer>
            <div class="card-footer-jm">昨日订单量¥ 210,000,0</div>
          </template>
        </CommonCard>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <CommonCard title="今日交易用户数" value="256,206,1">
          <BarChart></BarChart>
          <template #footer>
            <div class="card-footer-jm">退货率5.91%</div>
          </template>
        </CommonCard>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <CommonCard title="累计用户数" value="117,796,5">
          <ProgressChart></ProgressChart>
          <template #footer>
            <div class="card-footer-jm">
              <span>日同比 17.70% </span>
              <svg
                t="1664211823894"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5686"
                width="14"
                height="14"
              >
                <path
                  d="M573.056 272l308.8 404.608A76.8 76.8 0 0 1 820.736 800H203.232a76.8 76.8 0 0 1-61.056-123.392L450.976 272a76.8 76.8 0 0 1 122.08 0z"
                  p-id="5687"
                  fill="#008000"
                ></path>
              </svg>
              <span>月同比 47.12%</span>
              <svg
                t="1664211714727"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4477"
                width="14"
                height="14"
              >
                <path
                  d="M573.056 752l308.8-404.608A76.8 76.8 0 0 0 820.736 224H203.232a76.8 76.8 0 0 0-61.056 123.392l308.8 404.608a76.8 76.8 0 0 0 122.08 0z"
                  p-id="4478"
                  fill="#ff0000"
                ></path>
              </svg>
            </div>
          </template>
        </CommonCard>
      </el-col>
    </el-row>
    <Sales></Sales>
  </div>
</template>

<script lang="ts">
export default {
  name: "xHome",
};
</script>
<script lang="ts" setup>
import { useUserInfoStore } from "@/stores/userInfo";
import CommonCard from "./components/CommonCard.vue";
import LineChart from "./components/LineChart.vue";
import BarChart from "./components/BarChart.vue";
import ProgressChart from "./components/ProgressChart.vue";
import Sales from "./components/Sales.vue";

const userInfoStore = useUserInfoStore();
</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  padding: 20px;
  font-size: 30px;
}

.col-ys {
  /* height: 240px; */
  margin-bottom: 20px;
}

.card-body-tp {
  margin: 5px 0;
}

.card-footer-jm {
  margin-top: 10px;
  font-size: 12px;
  color: #666;
}

.bj-color {
  padding: 20px;
  background-color: #e6e6e6;
}
</style>
